<template>
  <!-- 搜索页面，也是三级分类点击进入的页面，只是请求的数据不一样 -->
  <div class="search">
    <!-- 头部 -->
    <header>
      <i class="iconfont icon-arrow-left" @click="goBack"></i>
      <h3>菜谱搜索</h3>
    </header>
    <!-- 搜索框 -->
    <div class="searchOption">
      <div class="searchInput">
        <i class="iconfont icon-sousuoxiao"></i>
        <input type="text" placeholder="搜索菜谱" />
      </div>
      <i class="iconfont icon-shaixuan" @click="showAction"> </i>
    </div>
    <nav v-if="show">
      <li class="caipu" @click="chooseAction">菜谱</li>
      <li class="user" @click="chooseAction">用户</li>
      <li class="menu" @click="chooseAction">菜单</li>
    </nav>
    <!-- 菜谱列表 -->
    <div class="list" v-if="choose === 'caipu'">
      <router-link
        v-for="(item, index) in list1"
        :key="index"
        class="list-item"
        :to="{ name: 'detail', params: { recipe_id: item._id } }"
      >
        <!-- 菜谱封面 -->
        <img :src="item.coverImg" class="fengmian" />
        <p>{{ item.title }}</p>
        <!-- 发布菜谱的用户的信息 -->
        <div class="userInfo">
          <!-- 头像 -->
          <img :src="item.user_id.avatar" />
          <!-- 用户名 -->
          <span>{{ item.user_id.user_name }}</span>
        </div>
      </router-link>
    </div>
    <!-- 用户列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      v-if="choose === 'user'"
    >
      <div class="box" v-for="(item, index) in list" :key="index">
        <img v-lazy="item.avatar" alt="" class="left" />

        <div class="right">
          <div>
            <p class="username">{{ item.username }}</p>
            <p class="time">
              {{ item.sex }}
              <span>{{ item.time }}年加入</span>
            </p>
          </div>
          <p class="btn" @click="follow(item.id)">+ 关注</p>
        </div>
      </div>
    </van-list>
    <!-- 菜单列表 -->
    <div class="list" v-if="choose === 'menu'">
      <router-link
        v-for="(item, index) in list1"
        :key="index"
        class="list-item"
        to="/detail"
      >
        <!-- 菜谱封面 -->
        <img :src="item.fengmian" class="fengmian" />
        <div class="float">15道菜</div>
        <p>{{ item.title }}</p>
        <!-- 发布菜谱的用户的信息 -->
        <div class="userInfo">
          <!-- 头像 -->
          <img :src="item.avatar" />
          <!-- 用户名 -->
          <span>{{ item.username }}</span>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
import { List } from "vant";
import { searchTypeApi } from "@/api/search";
export default {
  props: {
    type3: String,
  },
  components: {
    [List.name]: List,
  },
  data() {
    return {
      list1: [],
      show: false,
      choose: "caipu",

      list: [],
      loading: false,
      finished: false,
    };
  },
  methods: {
    goBack() {
      // 返回点击进来前的页面
      this.$router.back();
    },
    showAction() {
      this.show = true;
    },
    chooseAction(el) {
      this.show = false;
      this.choose = el.target.classList.value;
    },
    onClickLeft() {
      history.back();
    },
    follow(id) {},
    onLoad() {
      let a = {
        id: "1",
        sex: "女",
        time: "2021",
        avatar:
          "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
        username: "西瓜",
      };
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(a);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    async searchType() {
      try {
        let res = await searchTypeApi({
          type3: this.$route.params.Keywords,
        });
        this.list1 = res.data.data;
      } catch (error) {}
    },
  },
  mounted() {
    this.searchType();
  },
};
</script>

<style scoped lang="scss">
header {
  height: 50px;
  line-height: 50px;
  i {
    font-size: 18px;
    position: absolute;
    left: 20px;
  }
  h3 {
    text-align: center;
    font-weight: 700;
  }
}
.searchOption {
  padding: 0 20px;
  height: 40px;
  margin-bottom: 15px;
  .searchInput {
    width: 85%;
    background-color: rgba(242, 242, 242, 1);
    position: relative;
    border-radius: 20px;
    i {
      color: #c0bbbb;
      padding-left: 20px;
    }
    input {
      width: 70%;
      height: 40px;
      border: none;
      outline: none;
      padding-left: 10px;
      background-color: rgba(242, 242, 242, 1);
    }
  }
  .icon-shaixuan {
    position: absolute;
    top: 50px;
    right: 20px;
    line-height: 40px;
    font-size: 28px;
  }
}
nav {
  width: 50px;
  text-align: center;
  padding: 5px;
  border: 1px solid #cccccc;
  position: absolute;
  top: 90px;
  right: 10px;
  background-color: #fff;
  border-radius: 10px;
  z-index: 10;
  li {
    padding: 5px 0;
    border-bottom: 1px solid #cccccc7e;
    &:last-child {
      border: none;
    }
  }
}
.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 12px;
  line-height: 20px;
  padding: 0 20px;
  .list-item {
    width: calc(50% - 6px);
    position: relative;
    .fengmian {
      width: 100%;
      height: 202px;
    }
    .userInfo {
      display: flex;
      img {
        width: 20px;
        height: 20px;
      }
      span {
        padding-left: 10px;
        line-height: 20px;
      }
    }
    span {
      color: #999;
    }
    p {
      color: #000;
    }
    .float {
      background-color: #666ee8;
      color: #fff;
      width: 40%;
      position: absolute;
      top: 0;
      padding-left: 10px;
      border-radius: 0 10px 10px 0;
    }
  }
}
.box {
  display: flex;
  align-items: center;
  height: 21.3333vw;
  padding: 0 4vw;
  justify-content: space-between;
  .left {
    border-radius: 50%;
    margin-right: 2.6667vw;
    width: 10.6667vw;
    height: 10.6667vw;
  }
  .right {
    height: 100%;
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    div {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .time {
        margin-top: 2.6667vw;
        color: #999999;
        font-size: 3.2vw;
      }
    }
    .btn {
      background: #666ee8;
      text-align: center;
      border-radius: 6.6667vw;
      padding: 1.8667vw 4vw;
      font-size: 3.7333vw;
      color: #fff;
    }
  }
}
</style>
